<template>
  <div class="myInfo">
    <div class="title">
      <span>模板商品管理</span>
      <span>
        <input type="text" placeholder="搜索..." v-model="searchVal" />
      </span>
      <!-- <span class="right" style="color:red;cursor:pointer;" @click.stop="doShowAddTempGoods">添加商品</span> -->
    </div>
    <div class="store">
      <table class="head">
        <th width="10%">序号</th>
        <th width="40%">商品名</th>
        <th width="10%">商品价格</th>
        <th width="20%">商品图片</th>
        <th width="20%">操作</th>
      </table>
      <table class="body">
        <tr v-for="(item,index) in tempGoodsList" :key="index">
          <td width="10%">{{index+1+(curPage-1)*size}}</td>
          <td width="40%">{{item.name}}</td>
          <td width="10%">{{item.salesPrice}}</td>
          <td width="20%" class="gift-img">
            <div><img :src="item.imageURL" alt=""></div>
          </td>
          <td width="20%">
            <span style="color:blue;" @click="doDeal(item)">修改</span>
            <span style="color:red;" @click="doDel(item)">删除</span>
          </td>
        </tr>
      </table>
    </div>
    <div class="change-goods-info" v-if="showChangeTempGoods" @click="showChangeTempGoods=false">
      <div class="goods-wrap" @click.stop="">
        <div class="item goods-name">
          <span class="goods-tit">商品名称:</span>
          <div class="item-mod">
            <input type="text" placeholder="请输入商品名字" v-model="nowSelTempGoods.name" />
          </div>
        </div>
        <div class="item goods-price">
          <span class="goods-tit">商品价格:</span>
          <div class="item-mod">
            <input type="text" placeholder="请输入商品价格" v-model="nowSelTempGoods.salesPrice" />
          </div>
        </div>
        <div class="item goods-img">
          <span class="goods-tit">商品图片:</span>
          <div class="item-mod">
            <img v-if="!tempGoodsImgUrl" :src="nowSelTempGoods.imageURL" alt="">
            <img v-else :src="tempGoodsImgUrl" alt="">
            <div class="upload-img">
                <span class="choseImg">选择图片</span>
                <input type="file" @change="cropImg" name="logo" id="">
            </div>
          </div>
        </div>
        <div class="item confirm">
          <button @click="save">确定</button>
        </div>
      </div>
    </div>
    <div class="page right">
      <el-pagination background layout="prev, pager, next" :page-size="size" :total="totalElements" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <img-crop v-if="showCrop" :oldImg="oldImgBase64" :curCropW="curCropW" :curCropH="curCropH" :type="'PRODUCT'" :curStoreId="curStoreId" @closeImgCrop="showCrop=false" @getCropImgBase="getCropImgBase"></img-crop>
  </div>
</template>

<script>
import imgCrop from "./../components/imgCrop/imgCrop.vue";
import {BASE_URL} from "./../../urlConfig/index";

export default {
  components: { imgCrop },
  data() {
    return {
      searchVal:"",
      isSearch:false,
      tempGoodsList: [],
      size: 9,
      totalElements: 0,
      nowSelTempGoods: {},
      showChangeTempGoods: false,
      showCrop: false,
      oldImgBase64: "",
      curCropW: 600, // 裁剪宽度
      curCropH: 600, // 裁剪高度
      tempGoodsImgUrl: "",
      curPage: 1, //当前页
      curStoreId: "9f5afd60-e952-11e7-a26a-83436326b6c5"
    };
  },
  watch:{
    searchVal(val){
      if(val == "" || !val){
        this.isSearch = false;
        this.curPage = 1;
        this.getAllData(0);
        return;
      }
      this.getAllDataBySearch(decodeURI(val),0);
    },
  },
  methods: {
    getAllDataBySearch(val,page){
      this.$http({
        url: BASE_URL+"v1/call/product-search",
        method: "GET",
        params:{
          name:val,
          page,
          size:this.size
        }
      }).then(res => {
        console.log(res);
        this.isSearch = true;
        this.tempGoodsList = res.data.content;
        this.totalElements = res.data.totalElements;
      });
    },
    doShowAddTempGoods(){
      this.nowSelTempGoods = {};
      this.tempGoodsImgUrl = "";
      this.showChangeTempGoods = true;
    },
    handleCurrentChange(val) {
      console.log(this.isSearch)
      if(this.isSearch){
        this.getAllDataBySearch(decodeURI(this.searchVal),val -1);
      }else{
        this.getAllData(val - 1);
      }
      this.curPage = val;
    },
    doDel(item){
      this.$http({
        url: BASE_URL+"v1/call/delete-product",
        method: "GET",
        params: {
          id: item.id,
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.showChangeTempGoods = false;
          this.getAllData(this.curPage - 1);
        }
      });
      return;
      this.$confirm('是否删除该商品', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(()=>{
          this.$http({
            url: BASE_URL+"v1/call/delete-product",
            method: "GET",
            params: {
              id: item.id,
            }
          }).then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: "success"
              });
              this.showChangeTempGoods = false;
              this.getAllData(this.curPage - 1);
            }
          });
        });
    },
    //上传图片
    cropImg(e) {
      let reader = new FileReader();
      let that = this;
      let fileObj = e.target.files[0];

      if (e.target.files.length == 0) {
        return false;
      }

      // 判断图片大小
      if (fileObj.size > this.coverImgMaxSize) {
        this.errorMsg = "上传图片的大小不能超过5MB";
        this.openErrorTip = true;
        this.$message({
          message: "上传图片的大小不能超过5MB",
          type: "error"
        });
        return false;
      }

      reader.onload = (function(file) {
        return function(e) {
          let _this = this; // 缓存当前this
          let img = new Image();
          img.src = this.result;
          img.onload = function() {
            let imgBase64 = _this.result; //获得图片的base64的数据
            that.oldImgBase64 = imgBase64;
            that.showCrop = true;
          };
        };
      })(e.target.files[0]);

      reader.readAsDataURL(e.target.files[0]);
    },
    getCropImgBase(imgUrl) {
      this.tempGoodsImgUrl = imgUrl;
    },
    
    doDeal(item) {
      this.nowSelTempGoods = JSON.stringify(item);
      this.nowSelTempGoods = JSON.parse(this.nowSelTempGoods);
      this.tempGoodsImgUrl = "";
      this.showChangeTempGoods = true;
      return;
      this.$http({
        url: BASE_URL+"v1/call/update-storeAccount",
        method: "POST",
        data: {
          id: item.id,
          accounting: 1
        }
      }).then(res => {
        console.log(res);
        this.$message({
          message: "划账成功",
          type: "success"
        });
        this.getAllData(this.curPage - 1);
      });
    },
    save() {
      let tempGoodsImgUrl = this.tempGoodsImgUrl ? this.tempGoodsImgUrl:this.nowSelTempGoods.imageURL;
      this.$http({
        url: BASE_URL+"v1/call/update-product",
        method: "POST",
        data: {
          id: this.nowSelTempGoods.id,
          name: this.nowSelTempGoods.name,
          imageUrl: tempGoodsImgUrl,
          amount: this.nowSelTempGoods.salesPrice
        }
      }).then(res => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.showChangeTempGoods = false;
          this.getAllData(this.curPage - 1);
        }
      });
    },
    getAllData(page) {
      this.$http({
        url: BASE_URL+"v1/call/get-template",
        method: "GET",
        params:{
          page,
          size:this.size
        }
      }).then(res => {
        console.log(res);
        this.tempGoodsList = res.data.content;
        this.totalElements = res.data.totalElements;
      });
    }
  },
  created: function() {},
  mounted() {
    this.getAllData(0);
  }
};
</script>
<style lang="scss" scoped>
@import "./tempGoods.scss";
</style>
